<template>
    <div>
        <template v-for="btn in options">
            <vxe-button v-if="dropVisible(btn)" mode="text" status="primary" transfer :content="btn.content"
                :name="btn.name" @click="clickEvent({ name: btn.name, row: value }, btn.dropdowns)">
                <template #dropdowns v-if="btn.dropdowns">

                    <template v-for="item in btn.dropdowns">
                        <vxe-button v-if="dropVisible(item)" mode="text" :content="item.content"
                            @click="clickEvent({ name: item.name, row: value }, false)"></vxe-button>
                    </template>
                </template>
            </vxe-button>
        </template>

    </div>
</template>

<script>
import { cloneDeep } from '@/utils';
export default {
    data() {
        return {
        }
    },
    computed: {
        field() {
            return this.$attrs.column.field
        },
        options() {
            return this.$attrs.column.cellRender.options
        },
        events() {
            return this.$attrs.column.cellRender.events
        },
        value() {
            return cloneDeep(this.$attrs.row)
        }
    },
    methods: {
        clickEvent(e, noClick) {
            if (!noClick) {
                this.events.click(e)
            }
        },
        dropVisible(item) {
            if (typeof item.visibleMethod == 'function') {
                return item.visibleMethod()
            } else {
                return true
            }

        }
    }
}
</script>

<style lang="scss" scoped>
.vxe-button--dropdown {
    margin-left: 0 !important;
}
</style>